<template>
<div class="wrapper">
  <head title="My collection">
    <div slot="right" class="rightBox" @click="showDel=!showDel">
      <text v-if="showDel" class="complete">Cancel</text>
      <text v-else class="delIcon">&#xe6e4;</text>
    </div>
  </head>
  <div class="tabr">
    <div class="tabItem" v-for="(item,index) in navList" :key="index" @click="tabClick(index)">
      <text :class="[tabCurrentIndex === index?'on':'off']">{{ item.text }}</text>
    </div>
  </div>
  <slider class="slider" @change="slideChange" :index="tabCurrentIndex">
    <scroller class="listScroll" v-for="(items, index1) in navList" :key="index1">
      <div class="scrollerDiv" v-if="items.orderList.length>0">
        <div
          class="listCell"
          v-for="(item,index) in items.orderList"
          :key="index"
          @longpress="showDel=true"
          @click="toUrl(item)"
        >
          <image class="cellImg" :src="item.thumb" resize="cover" />
          <div v-if="showDel" class="selectMask" @click="selected(index)">
            <image class="selectImg" :src="`root:img/iconcheck${item.selected?'ed':''}.png`" />
          </div>
        </div>
        <div class="empty"></div>
        <div class="empty"></div>
        <div class="empty"></div>
      </div>
      <empty v-if="items.orderList.length==0" tips="Collection empty"></empty>
    </scroller>
  </slider>
  <div class="bottomBar" v-if="showDel">
    <div
      v-if="index==tabCurrentIndex"
      class="checkAllBox"
      @click="allSelect"
      v-for="(item,index) in navList"
      :key="index"
    >
      <text v-if="item.isAllselected" class="selectAll selected">&#xe60d;</text>
      <text v-else class="selectAll">&#xe67f;</text>
      <text>Check all</text>
    </div>
    <text class="delBox" @click="deleteC">Delete</text>
  </div>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
import {
  get_goods_collection_List,
  del_all_collection
} from "../../../mixin/ajax";
import asCore from "../../../mixin/core";
const keepChange = new BroadcastChannel("keepChange");
export default {
  data() {
    return {
      userId: "",
      tabCurrentIndex: 0,
      selectedAll: false,
      showDel: false,
      selectedList: [],
      show: true,
      navList: [
        {
          hasMore: true,
          state: 1,
          page: 1,
          text: "GIV products",
          loadingType: "more",
          isAllselected: false,
          selectedList: [],
          total: 0,
          orderList: []
        },
        {
          hasMore: true,
          state: 0,
          text: "GIV posting",
          page: 1,
          loadingType: "more",
          total: 0,
          isAllselected: false,
          selectedList: [],
          orderList: []
        }
      ],
      goodsList: [],
      shopList: [],
      headerTop: 0,

      subState: "",
      theIndex: null,
      oldIndex: null,
      isStop: false
    };
  },
  created() {
    let that = this;
    keepChange.onmessage = function(data) { 
      that.getList(that.tabCurrentIndex, "refsher");
    };
  },

  methods: {
    onLoad(parmar) {
      asCore.getBsessionid(userId => {
        this.userId = userId;
        this.getList(0);
        this.getList(1);
      });
    },
    tabClick(index) {
      if (this.tabCurrentIndex == index) {
        return false;
      }
      this.tabCurrentIndex = index;
      this.getList(this.tabCurrentIndex);
    },
    // 选中商品
    selected(index) {
      let pageNav = this.navList[this.tabCurrentIndex];
      let navItem = this.navList[this.tabCurrentIndex].orderList;
      navItem[index].selected = navItem[index].selected ? false : true;
      let i = pageNav.selectedList.indexOf(navItem[index].id);
      i > -1
        ? pageNav.selectedList.splice(i, 1)
        : pageNav.selectedList.push(navItem[index].id);
      pageNav.isAllselected = pageNav.selectedList.length == navItem.length;
    },
    //全选
    allSelect() {
      let pageNav = this.navList[this.tabCurrentIndex];
      let navItem = this.navList[this.tabCurrentIndex].orderList;
      let len = navItem.length;
      let arr = [];
      for (let i = 0; i < len; i++) {
        navItem[i].selected = pageNav.isAllselected ? false : true;
        arr.push(navItem[i].id);
      }
      pageNav.selectedList = pageNav.isAllselected ? [] : arr;
      pageNav.isAllselected =
        pageNav.isAllselected || navItem.length == 0 ? false : true;
    },
    getList(index, refsher) {
      let navItem = this.navList[index];
      // if (navItem.loaded === true) {
      //   //tab切换只有第一次需要加载数据
      //   return;
      // }
      if (refsher == "refsher") {
        navItem.hasMore = true;
         navItem.page = 1;
      }
      if (navItem.loadingType === "loading" || !navItem.hasMore) {
        //防止重复加载
        return;
      }
      let type = index == 1 ? 2 : 1;
      navItem.loadingType = "loading";
      this.isLoading = true;
      get_goods_collection_List(
        { users_id: this.userId, type: type, page: navItem.page, page_num: 30 },
        (res, flag) => {
          this.isLoading = false;
          if (flag) {
            if (res.code == 200) {
              let list = res.data.list;
              list.forEach(item => {
                this.$set(item, "selected", false);
              });
              if (navItem.page == 1) {
                navItem.orderList = list;
              } else {
                navItem.orderList = navItem.orderList.concat(list);
              }
              navItem.page++;
              this.$set(navItem, "total", res.data.total);
              this.$set(navItem, "loaded", true);
              if (navItem.orderList.length == res.data.total) {
                this.$set(navItem, "hasMore", false);
              }
              navItem.loadingType = "more";
            }
          }
        }
      );
    },
    toUrl(item) {
      if (this.tabCurrentIndex == 1) {
        this.push("root:app/goods/goods2.js", { id: item.goods_id });
      } else {
        this.push("root:app/goods/goods.js", { id: item.goods_id });
      }
    },
    deleteC() {
      let pageNav = this.navList[this.tabCurrentIndex];
      if (pageNav.selectedList.length == 0) {
        this.toast("pick goods");
        return false;
      }
      let id = pageNav.selectedList.join(",");
      del_all_collection({ users_id: this.userId, id: id }, (res, flag) => {
        if (flag) {
          if (res.code == 200) {
            this.toast(res.message);
          }
        }
      });
      while (pageNav.selectedList.length > 0) {
        this.deleteGoods(pageNav.selectedList[0]);
      }
      //丢弃
    },
    deleteGoods(id) {
      let pageNav = this.navList[this.tabCurrentIndex];
      let len = pageNav.orderList.length;
      for (let i = 0; i < len; i++) {
        if (id == pageNav.orderList[i].id) {
          pageNav.orderList.splice(i, 1);
          break;
        }
      }
      pageNav.selectedList.splice(pageNav.selectedList.indexOf(id), 1);
    },
    slideChange(index) {
      if (this.tabCurrentIndex == index.index) {
        return false;
      }
      this.tabCurrentIndex = index.index;
      // this.getList("tabChange");
    }
  }
};
</script>
<style scoped lang="less">
.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  height: 40px;
  width: 40px;
}
.slider {
  flex: 1;
  width: 750px;
  position: relative;
}
.listScroll {
  flex: 1;
  width: 750px;
  background-color: #f5f5f5;
}

.rightBox {
  justify-content: center;
  align-items: center;
  flex-direction: row;
  // background-color: red;
  flex: 1;
  &:active {
    background-color: #222222;
  }
}
.tabr {
  height: 100px;
  width: 700px;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
}

.delIcon {
  font-family: iconfont;
  font-size: 38px;
  color: #ffffff;
}

.complete {
  font-size: 28px;
  color: #ffffff;
}

.tabItem {
  height: 100px;

  margin: 0 50px;
  padding: 0 2px;
  justify-content: center;
  align-items: center;
}

.off {
  line-height: 100px;
  height: 100px;
  border-bottom-width: 4px;
  border-bottom-color: #fff;
  border-bottom-style: solid;
  font-size: 30px;
}

.row {
  flex-direction: row;
}

.on {
  line-height: 100px;
  height: 100px;
  border-bottom-width: 4px;
  border-bottom-color: #ba8833;
  border-bottom-style: solid;
  color: #ba8833;

  font-size: 30px;
}

.wrapper {
  background-color: #fff;
}

.bottomBar {
  width: 750px;
  height: 90px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background-color: #fff;
  /* position: fixed; */
  /* bottom: -90px; */
}

.checkAllBox {
  flex-direction: row;
  flex: 1;
  align-items: center;
}

.selectAll {
  font-size: 40px;
  color: #000000;
  font-family: iconfont;
  margin-right: 10px;
}

.delBox {
  background-color: #2a2a2a;
  color: #ffffff;
  width: 228px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 8px;
}

.listBox {
  flex: 1;
}

.scroller {
  width: 750px;
  flex: 1;
}

.scrollerDiv {
  flex-direction: row;
  flex-wrap: wrap;
  width: 750px;
  padding: 32px;
  justify-content: space-between;
}

.listCell {
  width: 160px;
  height: 160px;
  margin-bottom: 20px;
  justify-content: center;
  align-items: center;
  /* border-width: 1px;
  border-style: solid;
  border-color: #e6e6e6; */
  border-radius: 5px;
  position: relative;
}

.selectMask {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.selectImg {
  top: 5px;
  right: 5px;
  position: absolute;
  width: 42px;
  height: 42px;
}

.select {
  font-family: iconfont;
  font-size: 40px;
  top: 10px;
  right: 10px;
  position: absolute;
}

.selected {
  color: #ba8833;
}

.cellImg {
  width: 150px;
  height: 150px;
  background-color: #fff;
}

.empty {
  width: 170px;
  height: 0;
  margin: 5px;
}

.mask {
  position: fixed;
  left: 104px;
  width: 542px;
  height: 185px;
  top: 570px;
  background-color: rgba(31, 31, 31, 0.85);
  border-radius: 8px;
}

.inputDate {
  width: 300px;
  background-color: #999;
  height: 100px;
}
</style>
